<!--  -->
<template>
  <div class="add">

    <section class="container-main-header">
      <section class="header-left">
        <i class="el-icon-menu"></i>
        <h3>首页</h3>
        <span class="solidus">/</span>
        <h3>商品</h3>
        <span class="solidus">/</span>
        <span>添加商品</span>
      </section>
      <section class="header-right">
        <i class="el-icon-pear"></i>
      </section>
    </section>

    <div class="addbox-main">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="填写商品信息"></el-step>
        <el-step title="填写商品促销"></el-step>
        <el-step title="填写商品属性"></el-step>
        <el-step title="选择商品关联"></el-step>
      </el-steps>

      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品分类:" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择">
            <el-option label="服装" value="shanghai"></el-option>
            <el-option label="手机数码" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品名称" prop="name">
          <el-col :span="14">
            <el-input v-model="ruleForm.name"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="副标题" prop="fubiaoti">
          <el-col :span="14">
            <el-input v-model="ruleForm.fubiaoti"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="商品品牌:" prop="region">
          <el-select v-model="ruleForm.pingpai" placeholder="请选择">
            <el-option label="小米" value="shanghai"></el-option>
            <el-option label="七匹狼" value="beijing"></el-option>
            <el-option label="海澜之家" value="beijing"></el-option>
            <el-option label="华为" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品介绍:" prop="desc">
          <el-col :span="14">
            <el-input type="textarea" v-model="ruleForm.desc" placeholder="请选择"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="商品货号:" prop="productCode">
          <el-col :span="14">
            <el-input v-model="ruleForm.productCode"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="商品售价:" prop="commodityPrice">
          <el-col :span="14">
            <el-input v-model="ruleForm.commodityPrice" :rows="1"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="市场价:" prop="marketPrice">
          <el-col :span="14">
            <el-input v-model="ruleForm.marketPrice"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="商品库存:" prop="commodityStocks">
          <el-col :span="14">
            <el-input v-model="ruleForm.commodityStocks"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="计量单位:" prop="unitOfMeasurement">
          <el-col :span="14">
            <el-input v-model="ruleForm.unitOfMeasurement"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="商品重量:" prop="commodityWeight">
          <span style="margin-left:20px">克</span>
          <el-col :span="10">
            <el-input v-model="ruleForm.commodityWeight"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="排序:" prop="sort">
          <el-col :span="14">
            <el-input v-model="ruleForm.sort"></el-input>
          </el-col>
        </el-form-item>
      </el-form>

      <el-button style="margin-left:100px; " @click="next" type="primary">下一步填写商品促销</el-button>
    </div>
  </div>
</template>
        
<script>
export default {
  data() {
    return {
      active: 0,
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        fubiaoti: "",
        pingpai: "",
        //商品货号
        productCode: "",
        //商品售价
        commodityPrice: "",
        //市场价
        marketPrice: "",
        //商品库存
        commodityStocks: "",
        //计量单位
        unitOfMeasurement: "",
        //商品重量
        commodityWeight: "",
        sort:''
      },
      rules: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        fubiaoti: [
          { required: true, message: "请输入商品副标题", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ]
      }
    };
  },

  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    },

  }
};
</script>
<style  scoped>
.container-main-header {
  padding: 0 20px;
  align-items: center;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.header-left {
  display: flex;
  align-items: center;
}
.header-left h3 {
  font-size: 14px;
}
.solidus {
  margin: 0 5px;
}
.el-icon-menu {
  margin-right: 20px;
}
.el-icon-pear {
  font-size: 24px;
}





.addbox-main {
  width: 800px;
  margin: 20px auto;
  border: 1px solid #ebeef5;
  padding: 35px 35px 15px;
}

::v-deep .el-input__inner {
    height: 20px;
}
el-step {
  font-size: 14px;
}

.demo-ruleForm {
  margin-top: 50px;
}

::v-deep .el-input__inner {
    height: 32px;
}
</style>